<template>
  <tm-card
    :height="380"
    :margin="props.margin"
    :padding="props.padding"
    :title="props.title"
    :isDivider="false"
  >
    <!-- 正文插槽 -->
    <template #content>
      <view class="custom-home-card-extra-content">
        <view
          class="custom-extra-item"
          v-for="(item, index) in list"
          :key="index"
        >
          <tm-text
            :fontSize="24"
            :color="'#6f7686'"
            class="custom-home-card-content-title"
          >
            {{ item.label }}：
          </tm-text>
          <tm-text :fontSize="28" :color="'#232323'">{{ item.value }}</tm-text>
        </view>
      </view>
    </template>
    <template v-slot:action>
      <view class="flex flex-row flex-row-center-end flex-1">
        <tm-text :fontSize="28" :color="'#4ea1db'"></tm-text>
        <tm-text :fontSize="28" :color="'#4ea1db'">查看详情</tm-text>
      </view>
    </template>
  </tm-card>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

type Props = {
  title: string // 卡片标题
  margin: [number, number] // 卡片外边距
  padding: [number, number] // 卡片内外边距
}
const props = defineProps<Props>()
let list = ref<any>([
  {
    label: '资产编号',
    value: 'SBJJJ202404080023'
  },
  {
    label: '资产名称',
    value: '台式电脑'
  },
  {
    label: '资产分类名称',
    value: '设备/信息化设备/计算机/台式计算机'
  },
  {
    label: '资产原值',
    value: 4500
  },
  {
    label: '累计折旧/摊销',
    value: 85.56
  }
])
</script>

<style lang="scss" scoped>
.custom-home-card-extra {
  display: flex;
  justify-content: center;
  align-items: center;

  .custom-home-card-extra-text {
    margin-left: 12rpx;
    margin-right: 12rpx;
  }
}
.custom-home-card-extra-content {
  padding-top: 30rpx;
  padding-bottom: 0 !important;
  height: 240rpx;
  width: 686rpx;
  overflow-x: auto;
  gap: 10rpx;
  white-space: nowrap;
  display: flex;
  flex-wrap: wrap;
  .custom-extra-item {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    white-space: nowrap;
  }
}
</style>
